<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>个人简历-江浩</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.css">
    <link rel="stylesheet" href="style.css">
</head>
<body style="background: url('img/bg1.jpg') no-repeat center;background-size: cover">
<div class="nav">
    <p style="text-align: center;line-height: 50px">江浩 &nbsp&nbsp&nbspTEL：18553736701&nbsp&nbsp&nbspE-mail:857399703@qq.com</p>
</div>
<div id="fullPage">
    <div class="section section1">
        <img src="img/head.png" style="margin-top:8%;width: 8%;height: auto;border-radius: 50%; box-shadow:4px 4px 8px #aaa;">

        <div style="font-size: 18px;color: #333;margin-top: 5%;font-weight: 800">冲 天 干 劲 ，搏 击 长 空 ，敢 向 未 来 笑！</div>
        <div style="width: 60%;height: 2px;background-color: #999;margin: 1% auto 3%"></div>
        <p>
            我叫江浩<br>今年24岁<br>是一名UI设计师、初级前端工程师
        </p>

    </div>
    <div class="section section2">
        <div id="sec2-tit" style="margin-top: 50px">
            <h1>关 于 我</h1>
            <span style="color: red;font-size: 20px">ABOUT ME</span>
        </div>
        <div style="width:70%; margin:20px auto 0;display: -moz-box; display: -webkit-box; display: flex;">
            <div style="flex: 1;background-color:rgb(160,160,180);border-radius: 10px;margin: 0 20px" class="row">
                <img src="img/daxue@2x.png" width="70%">

                <p>学历：本科</p>
            </div>
            <div style="flex: 1;background-color:rgb(160,160,180);border-radius: 10px;margin: 0 20px" class="row">
                <img src="img/location@2x.png" width="70%">

                <p>地点：济南</p>
            </div>
            <div style="flex: 1;background-color:rgb(160,160,180);border-radius: 10px;margin: 0 20px" class="row">
                <img src="img/job@2x.png" width="70%">

                <p>工作：2年</p>
            </div>
            <div style="flex: 1;background-color:rgb(160,160,180);border-radius: 10px;margin: 0 20px" class="row">
                <img src="img/TEL@2x.png" width="70%">

                <p>电话：18553736701</p>
            </div>

        </div>
        <div style="width: 60%;margin: 550px auto;" id="aboutme">
            <p style="color: #222;font-size: 16px;line-height: 30px;border-radius: 10px">
                1、大学期间学过设计相关课程，能熟练使用sketch、photoshop、AI等设计软件，工作期间通过自学熟练掌握axure、墨刀等原型设计工具，会使用AE设计动态UI</br>
                2、工作积极主动，乐于学习。自学web前端开发，熟练掌握HTML+CSS页面布局，能够掌握基础jQuery、Bootstrap等前端开发框架</br>
                3、能够按时有效的完成工作任务，能与团队融洽相处</p>
        </div>
    </div>
    <div class="section section3">
        <div id="sec3-tit" style="margin-top: 50px;width: 100%;text-align: center">
            <h1>专 业 技 能</h1>
            <span style="color: red;font-size: 20px">SKILLS</span>
        </div>
        <div style="width: 60%; margin: 0 auto">
            <div id="ui"  style="margin-left: -9999px">
                <p style="margin: 20px auto;">UI设计：通过学习并加以多个项目实践已掌握以下专业工具的使用</p>
                <img src="img/ui.png" width="70%" >
            </div>
            <div id="web" style="margin-left: 9999px">
                <p style="margin: 20px auto;">WEB前端：结合自身的爱好及热情自学以下开发语言</p>
                <img src="img/web.png" width="70%"  >
            </div>
        </div>

    </div>
    <div class="section section4">
        <div id="sec4-tit" style="margin-top: 50px;width: 100%;text-align: center">
            <h1>工 作 经 历</h1>
            <span style="color: red;font-size: 20px">EXPERIENCES</span>
        </div>

        <div class="row">
            <div class="column column1">
                <h4>济南同瑞信息科技有限公司</h4>

                <p> 2015/02 -- 2015/08</p>
                <h5>用户界面（UI）设计</h5>

                <div class="intro">
                    <p>
                        负责公司合作项目的软件界面设计、移动端产品界面设计、公司宣传册设计、名片设计等，每个项目界面设计都是独立一人完成
                    </p>
                </div>
            </div>
            <div class="column column2">
                <h4>济南跨界电子商务有限公司</h4>

                <p> 2015/08 -- 至今</p>
                <h5>UI设计、前端</h5>

                <div class="intro">
                    <p>
                        负责公司软件系统界面及网站产品的界面视觉设计工作；负责不断优化升级产品UI，提高界面的视觉体验；参与公司软件产品的原型制作，交互设计，UI视觉元素设计；
                        <br>负责软件系统开发过程中页面视觉效果设计和前端静态页面制作工作。能够熟练使用图形图像制作类软件，能够熟练使用DIV+CSS构建静态前端HTML页面
                    </p>
                </div>
            </div>

        </div>
    </div>
    <div class="section section5">
        <div id="sec5-tit" style="margin-top: 50px;width: 100%;text-align: center">
            <h1>作 品 展 示</h1>
            <span style="color: red;font-size: 20px">PROJECT</span>
        </div>
        <div class="slide slide1">
            <img src="img/test1@2x.png" width="15%" id="i1">
            <img src="img/test2@2x.png" width="15%" id="i2">
            <img src="img/test3@2x.png" width="15%" id="i3">
            <img src="img/test4@2x.png" width="15%" id="i4">
        </div>
        <div class="slide slide2">
            <p>山大学术评审（议）系统</p>
            <img src="img/shanda0.png" width="12%" >
            <img src="img/shanda1.png" width="12%" >
            <img src="img/shanda2.png" width="12%" >
            <img src="img/shanda3.png" width="12%" >
        </div>
        <div class="slide slide2">
            <p>奔奔快递</p>
            <img src="img/ben1.png" width="12%" >
            <img src="img/ben2.png" width="12%" >
            <img src="img/ben3.png" width="12%" >
            <img src="img/ben4.png" width="12%" >
        </div>
        <div class="slide slide2">
            <p>豆花网购物平台</p>
            <img src="img/d1.PNG" width="12%" >
            <img src="img/d2.PNG" width="12%" >
            <img src="img/d3.PNG" width="12%" >
            <img src="img/d4.PNG" width="12%" >
        </div>
    </div>
    <div class="section section6">
        <div id="sec6-tit" style="margin-top: 50px;width: 100%;text-align: center">
            <h1>联 系 我 吧</h1>
            <span style="color: red;font-size: 20px">CONTACT ME</span>
        </div>
        <p style="font-size: 18px;font-weight: bold"
          >手捧菲薄求职之书，心怀自信诚挚之念，我期待着能与您一起并肩奋斗！ </p>

        <div style="width: 60%;margin: 10px auto">
            <img src="img/contact.png" width="60%">
       </div>

    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/move.js/0.5.0/move.min.js"></script>
<script>
    $(document).ready(function () {
        $('#fullPage').fullpage({
            verticalCentered: false,
            anchors: ['page1', 'page2', 'page3', 'page4', 'page5','page6'],
            slidesNavigation: true,
            navigation: true,
            navigationTooltips: ['首页', '关于我', '专业技能', '工作经历', '作品展示',  '联系我吧'],
            //滚动到某一屏后产生的动画效果
            afterLoad: function (link, index) {
                switch (index) {
                    case 1:
                        move('.section1 img').rotate(360).end();
                        move('.section1 p').set('margin-top', '5%').end();

                        break;
                    case 2:
                        move('#sec2-tit').scale(0.7).end();
                        move('#aboutme').set('margin-top', '50px').end();

                        break;
                    case 3:
                        move('#sec3-tit').scale(0.7).end();
                        move('#ui').set('margin-left', '0').end();
                        move('#web').set('margin-left', '0').end();
                        break;
                    case 4:
                        move('#sec4-tit').scale(0.7).end();
                        break;
                    case 5:
                        move('#sec5-tit').scale(0.7).end(function(){
                            move('#i1').rotate(360).end(function(){
                                move('#i2').rotate(360).end(function(){
                                    move('#i3').rotate(360).end(function(){
                                        move('#i4').rotate(360).end();
                                    });
                                });
                            });
                        });
                        break;
                    case 6:
                        move('#sec6-tit').scale(0.7).end();
                        break;
                    default :
                        break;
                }
            },
            //离开某一屏后恢复到初始效果
            onLeave: function (link, index) {
                switch (index) {
                    case 1:
                        move('.section1 img').rotate(-360).end();
                        move('.section1 p').set('margin-top', '800px').end();
                        break;
                    case 2:
                        move('#sec2-tit').scale(1).end();
                        move('#aboutme').set('margin-top', '550px').end();
                        break;
                    case 3:
                        move('#sec3-tit').scale(1).end();
                        move('#ui').set('margin-left', '-9999px').end();
                        move('#web').set('margin-left', '9999px').end();
                        break;
                    case 4:
                        move('#sec4-tit').scale(1).end();
                        break;
                    case 5:
                        move('#sec5-tit').scale(1).end();
                        move('#i1').rotate(-360).end();
                        move('#i2').rotate(-360).end();
                        move('#i3').rotate(-360).end();
                        move('#i4').rotate(-360).end();
                        break;
                    case 6:
                        move('#sec6-tit').scale(1).end();
                        break;
                    default :
                        break;
                }
            },
        })


    })
</script>
</body>
</html>
